class AuiSteps extends window.AUI.BaseComponent {
    constructor(name) {
        super(name)
        this.computed = {
            currentFinished: function () {
                var self = this;
                return _.filter(self.setps, function (v) {
                        return v.finished;
                    }).length - 1;
            },
            currentProccess: function () {
                var self = this;
                return self.currentFinished + 1;
            }
        };
        this.methods = {
            setActive(index) {
                var self = this;
                var data = [];
                for (var i = 0; i < self.setps.length; i++) {
                    if (i < index + 1) {
                        data.push({finished: true});
                    } else {
                        data.push({finished: false});
                    }
                }
                self.setps = data;
            },
            previous() {
                var self = this;
                self.setps[self.currentFinished].finished = false;
            },
            next() {
                var self = this;
                if (self.currentFinished < self.setps.length - 1) {
                    self.setps[self.currentFinished + 1].finished = true;
                }
            },
            start() {
                var self = this;
                self.setActive(-1);
            },
            done() {
                var self = this;
                self.setActive(self.setps.length);
            }
        };
    }
    _template() {
        var self = this;
return `
    <div class="${self._name} is-horizontal">
        <div class="aui-steps__addon is-horizontal" style="margin-right: 0px; width: 140px;">
            <div class="aui-step__line is-horizontal" style="margin-right: 0px;"><i class="aui-step__line-inner"
                :class="{
                    'aui-full-width-i': currentProccess > 0
                }"
            ></i></div>
        </div>
        <div class="aui-step is-horizontal" :class="
            {
                'is-wait': currentProccess < 0,
                'is-process': currentProccess == 0,
                'is-finish': setps[0].finished
            }"                
            style="margin-right: 0px; width: 140px;">
            <div class="aui-step__head is-text">
                <div class="aui-step__line is-horizontal" style="margin-right: 0px;"><i class="aui-step__line-inner"
                :class="{
                    'aui-full-width-i': currentProccess > 1
                }"                    
            ></i></div><span class="aui-step__icon"><div>1</div></span></div>
            <div class="aui-step__main" style="margin-left: 0px;">
                <div class="aui-step__title">填写注册信息</div>
                <div class="aui-step__description"></div>
            </div>
        </div>
        <div class="aui-step is-horizontal"  :class="
            {
                'is-wait': currentProccess < 1,
                'is-process': currentProccess == 1,
                'is-finish': setps[1].finished
            }" 
            style="margin-right: 0px; width: 140px;">
            <div class="aui-step__head is-text">
                <div class="aui-step__line is-horizontal" style="margin-right: 0px;"><i class="aui-step__line-inner"
                :class="{
                    'aui-full-width-i': currentProccess > 2
                }"   
                ></i></div><span class="aui-step__icon"><div>2</div></span></div>
            <div class="aui-step__main" style="margin-left: 0px;">
                <div class="aui-step__title">完善资质信息</div>
                <div class="aui-step__description"></div>
            </div>
        </div>
        <div class="aui-step is-horizontal" :class="
            {
                'is-wait': currentProccess < 2,
                'is-process': currentProccess == 2,
                'is-finish': setps[2].finished
            }"
            style="width: 140px;">
            <div class="aui-step__head is-text">
                <div class="aui-step__line is-horizontal"><i class="aui-step__line-inner"
                :class="{
                    'aui-full-width-i': currentProccess > 3
                }"                       
                ></i></div><span class="aui-step__icon"><div>3</div></span></div>
            <div class="aui-step__main" style="margin-left: 0px;">
                <div class="aui-step__title is-wait">客服审核</div>
                <div class="aui-step__description is-wait"></div>
            </div>
        </div>
        <div class="aui-step is-horizontal" :class="
            {
                'is-wait': currentProccess < 3,
                'is-process': currentProccess == 3,
                'is-finish': setps[3].finished
            }" 
            style="width: 140px;">
            <div class="aui-step__head is-text">
                <div class="aui-step__line is-horizontal"><i class="aui-step__line-inner"                    
                :class="{
                    'aui-full-width-i': currentProccess > 3
                }"   
                ></i></div><span class="aui-step__icon"><div>4</div></span></div>
            <div class="aui-step__main" style="margin-left: 0px;">
                <div class="aui-step__title is-wait">完成</div>
                <div class="aui-step__description is-wait"></div>
            </div>
        </div>            
        <div class="aui-steps__addon is-horizontal" style="margin-right: 0px; width: 140px;">
            <div class="aui-step__line is-horizontal" style="margin-right: 0px;"><i class="aui-step__line-inner" style="transition-delay: 0ms; width: 100%;"></i></div>
        </div>        
    </div>    
`
    }
    _data() {
        var ret = {};
        ret.setps = [
            {
                finished: false,
            },
            {
                finished: false
            },
            {
                finished: false
            },
            {
                finished: false
            }
        ];
        return ret;
    }
    _mounted() {
        var self = this;
        window.s = self;
    }
}

window.AUI.customCompoents.define("aui-steps", AuiSteps);
